<script setup>

import PageContainer from '@/components/PageContainer.vue'
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/index.js'
import { AvatarUploadService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { Plus, Upload } from '@element-plus/icons-vue'
const imgUrl = ref('')
const uploadRef = ref(null)

const submitUpload = async ()=>{
  const res = await AvatarUploadService(imgUrl.value)
  console.log(res)
  await userStore.renewInfo()
  imgUrl.value = userStore.userInfo.user_pic
  ElMessage.success("上传成功")
}

const onSelectFile = (uploadFile) => {
  console.log(uploadFile)
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
}

const userStore = useUserStore()

onMounted(() => {
  imgUrl.value = userStore.userInfo.user_pic
  console.log(userStore.userInfo)
})



</script>

<template>
  <page-container title="更换头像">
    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
     <el-upload
      ref="uploadRef"
      class="avatar-uploader"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="onSelectFile"
    >
        <template #trigger>
          <el-button type="primary" size="large" :icon="Plus">选择头像</el-button>
        </template>

        <el-button type="success" size="large" @click="submitUpload" :icon="Upload">
          上传头像
        </el-button>
  </el-upload>
  </page-container>
</template>

<style scoped>
.avatar-uploader {
  display: flex;
  gap: 16px;
}

.avatar {
  width: 350px;
  height: 350px;
  object-fit: cover;
  border: 1px dashed #dcdfe6;
  margin-bottom: 16px;
}

</style>
